<template>
	<div>
		<Card class='card-border'>
			<div class='download'>
				<div class='download-icon'>
					<i class='iconfont' :class='code.icon'></i>
				</div>
				<div style='margin:0 20px;flex:1'>
					<p class='download-title'>{{code.name}}</p>
					<p class='download-desc'>{{code.remark}}</p>
					<p class='download-desc' style='margin-top:6px'>服务价格 
						<span class='download-price'>￥{{code.price}}</span>
					</p>
				</div>
				<button class='btn btn-hover' @click='charge' style='margin-bottom:0'>{{owner ? '立即下载' : '立即购买'}}</button>
			</div>
		</Card>
		
		<div class='privilege'>
			<div style='margin-bottom: 20px'>
				<div class='privilege-line'></div>
				<span style='font-size:18px;color:#464C5B'>特权介绍</span>
			</div>
			<div style='margin-left:10px'>
				<!-- <p class='privilege-des'>1、支持下载应用下的源码</p> -->
				<div v-html='code.detail'></div>
			</div>
		</div>

		<Modal v-model="modal" width="600">
	        <p slot="header">
	            <span>购买特权</span>
	        </p>
	        <div style='margin-bottom: 24px'>
                <p style='font-size:16px;margin-bottom: 15px'>服务价格<span class='download-price'>￥{{code.price}}</span></p>
                <p style='font-size:16px;margin-bottom: 15px'>使用优惠券</p>
                <div v-if='coupon.length'>
                	<div v-for="(item,index) in coupon" class='sms' @click="selectCoupon(item,index)">
	                    <div :class="{'selected' : select_index == index + 1}" class='sms-wrap'>
	                        <div style='width: 100%'>
	                            <p style='font-size:18px;color:#464C5B;'>￥{{item.coupon.price}}</p>
	                            <p style="font-size: 10px;color: #657180;margin-top: 8px">{{item.ended_at | moment("YYYY.MM.DD")}}到期</p>
	                        </div>
	                    </div>
	                </div>
	                <div style="clear: both;"></div>
                </div>
                <div v-else>
                	<div>
	                    <div class='sms-wrap'>
	                        <div style='width: 100%'>
	                            <p style='font-size:14px;color:#657180;'>暂无优惠券</p>
	                        </div>
	                    </div>
	                </div>
                </div>
                <div style='font-size:16px;margin-top: 15px'>需支付<span class='download-price'>￥{{money}}</span></div>

	        </div>
	        <div slot="footer">
	            <button class='btn-cancel' @click="cancel">取消</button>
	            <button class='btn-sure' @click="sure">确认</button>
	        </div>
	    </Modal>
	    
	</div>
</template>
<script type="text/javascript">
	import Vue from 'vue'
	import axios from 'axios'
	export default{
		data(){
			return{
				modal:false,
				coupon:[],
				coupon_id:0,
				select_index:0,
				code:{},
				owner:0,
				money:0,
				id:this.$route.params.id
			}
		},
		created(){
			this.$bus.on('showPrivilege',(res)=>{
				if(res){
					this.id = res;
					this.getData()
					return
				}
			})
			this.getData();
		},
		
		methods:{
			getData(){
				this.fetch('/home/app/config/privilege/id/'+this.id).then(res=>{
					if(res&&res.data.data){
						this.code = res.data.data;
						this.owner = res.data.data.owner;
					}
				})
			},
			//选择优惠券
			selectCoupon(item,index){
				this.coupon_id = item.coupon_id;
                this.select_index = index + 1;
                this.money = this.code.price - item.coupon.price;
			},
			charge(){
				//购买
				if(!this.owner){
					this.modal = true;
					this.select_index = 0;
					this.money = this.code.price;
					this.fetch('/home/myCoupons?status=0').then(res=>{
						if(res&&res.data.data){
							this.coupon = res.data.data;
						}
					})
				}else{
				//下载
					window.open(axios.defaults.baseURL + '/home/app/config/privilege/download?token='+axios.defaults.headers.common['Token']+'&baastoken='+axios.defaults.headers.common['BaasToken'])
				}

			},
			cancel(){
				this.modal = false;
			},
			sure(){
				this.fetch('/home/app/config/privilege/buy',{
					id:this.id,
					coupon_id:this.coupon_id
				}).then(res=>{
					if(res&&res.data.code){
						this.modal = false;
						this.getData();
						this.$bus.emit('ownerPrivilege',true)
					}
				})
			}
		}
	}
</script>
<style scoped>
	.card-border{
		height: 150px;
		padding:15px 40px;
		background: #fff;
	}
	.download{
		background:#fff;
		display: flex;
		align-items: center
	}
	.download-icon{
		width:60px;
		height:60px;
		border-radius:50%;
		background:#F6C075;
		position: relative;
	}
	.download-icon i{
		font-size:30px;
		color:#fff;
		display: block;
		position: absolute;
		left:50%;
		margin-left: -15px;
		top:50%;
		margin-top: -22px;
	}
	.download-title{
		font-size:20px;
		color:#464C5B;
	}
	.download-desc{
		font-size:16px;
		color:#657180;
		margin-top: 2px
	}
	.download-price{
		font-size:16px;
		color:#f65a5a;
		margin-left: 10px
	}
	.privilege{
		background:#fff;
		margin-top:16px;
		padding:30px 40px;
		min-height: 400px
	}
	.privilege-line{
		width:3px;
		height:16px;
		background:#06A0FD;
		border-radius:2px;
		margin-right:10px;
		margin-top: 6px;
		float: left
	}
	
	.sms{
        cursor: pointer;
        float:left;
        margin-right: 16px;
        margin-bottom: 16px;
        line-height: 1;
    }
    .sms:nth-child(4n){
         margin-right: 0;
    }
    .sms-wrap{
        width:118px;
        height:72px;
        border:1px solid #D7DDE4;
        border-radius: 4px;
        text-align: center; 
        display: flex;
        align-items: center;
    }
    .selected{
        border: 1px solid #06A0FD !important;
    }
</style>
<style>
	.privilege-des{
		font-size:16px;
		color:#657180;
		line-height: 28px
	}
</style>
